<template>
  <van-tabbar v-model="active">
    <!-- <van-tabbar-item @click="goView(0)">
      <span>养生学堂</span>
      <template #icon="props">
        <img :src="props.active ? icon.health : icon.inHealth" />
      </template>
    </van-tabbar-item> -->
    <van-tabbar-item @click="goView(1)">
      <span>会员</span>
      <template #icon="props">
        <img :src="props.active ? icon.member : icon.inMember" />
      </template>
    </van-tabbar-item>
    <!-- <van-tabbar-item @click="goView(2)">
      <span>商城</span>
      <template #icon="props">
        <img :src="props.active ? icon.shop : icon.inShop" /> </template
    ></van-tabbar-item> -->
    <van-tabbar-item @click="goView(3)">
      <span>我的</span>
      <template #icon="props">
        <img :src="props.active ? icon.my : icon.inMy" />
      </template>
    </van-tabbar-item>
  </van-tabbar>
</template>

<script setup >
import { useRouter, useRoute } from 'vue-router'
import health from '@/assets/16.png'
import inHealth from '@/assets/15.png'
import member from '@/assets/32.png'
import inMember from '@/assets/31.png'
import shop from '@/assets/23.png'
import inShop from '@/assets/25.png'
import my from '@/assets/18.png'
import inMy from '@/assets/17.png'
const router = useRouter()
const route = useRoute()
const active = ref(0)
const icon = reactive({
  health: health,
  inHealth: inHealth,
  member: member,
  inMember: inMember,
  shop: shop,
  inShop: inShop,
  my: my,
  inMy: inMy,
})
watch(
  route,
  (newValue, oldValue) => {
    let path = newValue.path
    switch (path) {
      case '/health':
        // active.value = 0
        break
      case '/vip':
        active.value = 0
        break
      case '/my':
        active.value = 1
        break
    }
  },
  {
    immediate: true,
  }
)
const goView = (index) => {
  let userInfo = JSON.parse(localStorage.getItem('userInfo'))

  switch (index) {
    case 0:
      // router.push({ path: '/health' })

      break
    case 1:
      active.value = 0
      router.push({ path: '/vip' })
      break
    case 2:
      break
    case 3:
      active.value = 1
      router.push({ path: '/my' })
      break
  }
}
</script>
  
  <style scoped lang='less'>
.hskdjf {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 5px;
  border-top: 1px solid #ccc;
  background-color: #fff;
  .item {
    display: flex;
    flex-direction: column;
    align-items: center;
    .imgs {
      width: 20px;
      margin-bottom: 5px;
    }
  }
}
.van-tabbar {
  height: 60px;
}
.van-tabbar-item--active {
  color: #4d836b;
}
</style>